<template>
  <view class="nav-bar-wrapper">
    <!-- 填充区 -->
    <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px'}"></view>
    <!-- 导航栏 -->
    <view class="navbar" :style="{ height: getTitleBarHeight() + 'px' }">
      <view class="left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
        <text class="back-text">返回</text>
      </view>
      <view class="center">
        <text class="title">{{ title }}</text>
      </view>
      <view class="right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getStatusBarHeight, getTitleBarHeight } from '@/utils/system'

// 定义props
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  }
})

// 返回上一页
const goBack = () => {
  if (props.showBack) {
    uni.navigateBack({
      delta: 1
    })
  }
}
</script>

<style lang="scss">
.nav-bar-wrapper {
  width: 100%;
  background-color: $uni-bg-color;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  
  .statusBar {
    width: 100%;
    background-color: $uni-bg-color;
  }
  
  .navbar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    
    .left {
      position: absolute;
      left: 30rpx;
      height: 100%;
      display: flex;
      align-items: center;
      
      .back-text {
        font-size: 32rpx;
        color: $uni-text-color;
        margin-left: 4rpx;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      
      .title {
        font-size: 34rpx;
        font-weight: 500;
        color: $uni-text-color;
      }
    }
    
    .right {
      position: absolute;
      right: 30rpx;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style> 